<template>
  <a-input v-model:value="searchValue" placeholder="搜索资源组名称" style="width: 214px">
    <template #suffix>
      <i class="iconfont icon-search"></i>
    </template>
  </a-input>
  <div class="myResourcesIndex">
    <div>
      <div class="treeBox">
        <a-tree :expanded-keys="expandedKeys" :auto-expand-parent="autoExpandParent" :selectedKeys="[channelId]"
          :tree-data="treeData" @expand="onExpand" :fieldNames="fieldNames" class="atree" @select="selectKeys">
          <template v-slot:title="record">
            <div class="column-text" v-if="record.groupName.indexOf(searchValue) > 0">
              <div>
                {{ record.groupName.substr(0, record.groupName.indexOf(searchValue)) }}
                <span style="color: #f50">{{ searchValue }}</span>
                {{
                  record.groupName.substr(
                    record.groupName.indexOf(searchValue) + searchValue.length
                  )
                }}
              </div>
            </div>
            <div class="column-text" v-else>
              <div>
                {{ record.groupName }}
              </div>
            </div>
          </template>

        </a-tree>
      </div>
      <div :class="isOpenSide ? 'open-right open-right-side' : 'open-right'" v-show="isShowIcon" @click="openorhideSide">
        <i v-if="isOpenSide" class="iconfonts iconfont icon-a-doubleright" style="font-size: 20px">
        </i>
        <i v-else class="iconfonts iconfont icon-a-doubleleft" style="font-size: 20px">
        </i>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, watch, reactive, onMounted, nextTick, createVNode } from "vue";

import request from "@/api/index";
import { dataSourceType } from "@/type";

const dataList: dataSourceType['treeData'] = [];
const generateList = (data: dataSourceType['treeData']) => {
  for (let i = 0; i < data.length; i++) {
    const node = data[i];
    const id = node.id;
    dataList.push({ id, groupName: node.groupName });
    if (node.children) {
      generateList(node.children);
    }
  }
};

const getParentKey = (
  id: string | number,
  tree: dataSourceType['treeData'],
): string | number | undefined => {
  let parentKey;
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i];
    if (node.children) {
      if (node.children.some((item: dataSourceType) => item.id === id)) {
        parentKey = node.id;
      } else if (getParentKey(id, node.children)) {
        parentKey = getParentKey(id, node.children);
      }
    }
  }
  return parentKey;
};
// emit
const emit = defineEmits(['selectKeys']);

//树结构数据
const fieldNames = reactive<dataSourceType>({
  title: "groupName",
  key: "id",
});

// type

const searchValue = ref<string>("");
const expandedKeys = ref<(string | number)[]>([]);
const autoExpandParent = ref<boolean>(true);
const treeData = ref<dataSourceType["treeData"]>();
const channelId = ref<number>(0);
const isOpenSide = ref<boolean>(false);
const isShowIcon = ref<boolean>(false);
const allOrgKey = ref<number[]>([]);
// watch
watch(searchValue, value => {
  const expanded = dataList
    .map((item: dataSourceType['treeData'][number]) => {
      if (item.groupName.indexOf(value) > -1) {
        return getParentKey(item.id, treeData.value);
      }
      return null;
    })
    .filter((item: any, i: any, self: any) => item && self.indexOf(item) === i);
  expandedKeys.value = expanded;
  searchValue.value = value;
  autoExpandParent.value = true;
});

//methods
//获取栏目层级树列表
const fetchResourceGroupTreeList = async () => {
  let data = await request.fetchResourceGroupTreeList();
  let obj = {
    groupName: "无分组资源",
    id: 0,
    children: [],
    edit: false,
    isAdd: false,
    parentId: 0,
  };
  treeData.value = [obj, ...data];
  dataList.push(...data);
  generateList(treeData.value);
  console.log(dataList, 'dataList')
};
//展开和收起全部的操作
const onExpand = (keys: string[]) => {
  expandedKeys.value = keys;
  autoExpandParent.value = false;
};
const parentKey = ref<(string | number)[]>([]);


//选择分组下的资源库
const selectKeys = (item: any) => {
  if (item.length) {
    channelId.value = item[0];
    emit('selectKeys', item[0]);
  }

};
const traversal = (data: any) => {
  data.map((item: any) => {
    parentKey.value.push(item.id);
    if (item.children) {
      traversal(item.children);
    }
  });
  expandedKeys.value = parentKey.value;
};
//展开收起侧边栏
const openorhideSide = () => {
  isOpenSide.value = !isOpenSide.value;
};
//获取组织的全部id
const getAllOrgKey = (data: dataSourceType) => {
  data.length && data.map((item: any) => {
    if (!allOrgKey.value.find((jitem: number) => jitem === item.id)) {
      allOrgKey.value.push(item.id)
    }
    if (item.children && item.children.length) {
      getAllOrgKey(item.children)
    }
  })
}

//onmounted
onMounted(async () => {
  fetchResourceGroupTreeList();
});
</script>

<style lang="less" scoped>
.myResourcesIndex {
  width: 100%;
  height: calc(100% - 24px);
  display: flex;
  background-color: #fff;
  padding: 24px;
  overflow: auto;
  box-sizing: border-box;
  padding-left: 0px;

  .icon-search {
    font-size: 14px !important;
  }

  .side-left {
    width: 216px;
    height: calc(100% - 24px);
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    padding-right: 4px;
    position: relative;
    transition: width 0.3s;
    padding-right: 24px;

    .treeBox {
      height: 100%;
    }

    .treeTitle {
      margin-top: 16px;
      margin-bottom: 4px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 24px;
      background: #edf7ff;
      border-radius: 2px;
      padding: 0 4px;

      .openorclose {
        cursor: pointer;
        display: flex;
        align-items: center;
      }
    }

    .open-right {
      position: absolute;
      top: 50%;
      right: -1px;
      margin-top: -15px;
      bottom: -20px;
      height: 30px;
      width: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.06);
      z-index: 2;
    }

    .open-right-side {
      right: -20px;
    }

    .iconfont:hover {
      color: rgba(0, 0, 0, 0.6);
    }

    .iconfonts {
      color: rgba(0, 0, 0, 0.45);
    }
  }

  .side-close {
    width: 0;
    transition: width 0.3s;

    .treeBox {
      display: none;
    }
  }

  .myResourcesRight {
    width: 500px;
    border-left: 1px solid rgba(0, 0, 0, 0.06);
    flex: 1;
    height: 100%;
    padding: 0 24px;

    .addButton {
      display: flex;
      align-items: center;
      margin-right: 8px;

      .iconadd {
        font-size: 24px;
        margin-right: 4px;
      }
    }

    .select-content {
      margin-top: 24px;
      background: rgba(0, 0, 0, 0.02);
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      padding: 24px 24px 0;

      // margin-bottom: 24px;
      //   .selectLeft {
      //     display: flex;
      //     flex-direction: row;
      //     justify-content: space-between;
      //     align-items: center;
      //     flex-wrap: wrap;
      //     flex: 1;
      //   }
      .select-item {
        // width: 354px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: 24px;

        .title {
          font-size: 14px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.85);
        }

        .titleSelect {
          width: 205px;
          margin-right: 12px;
        }
      }

      .option-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: 24px;
        width: 277px;
      }

      .option-content .openorclose {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 16px;
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #1f6ded;

        .iconfont {
          margin-left: 5px;
        }
      }
    }
  }

  :deep(.ant-table-cell:nth-last-of-type(1)) {
    text-align: right;
    padding-right: 16px;
  }

  .eidtRecords {
    margin-right: 16px;
  }

  .eidtRecords:last-child {
    margin-right: 0;
  }

  ::v-deep(.titleBox) {
    display: flex;
    align-items: center;
    justify-items: center;

    // height: 29px;
    // line-height: 29px;
    // height: 18px;
    .titleTip {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-left: 16px;
    }

    .tabletypeImgBox {
      width: 80px;
      height: 80px;
      padding: 8px;
      background: #ffffff;
      border-radius: 2px;
      border: 1px solid rgba(0, 0, 0, 0.15);
    }

    .tabletypeImg {
      max-width: 64px;
      width: auto;
      max-height: 64px;

      height: auto;
      margin: auto;
      //   width: 16px;
      //   height: 16px;
      // line-height: 18px;
    }
  }

  ::v-deep(.ant-table-cell) {
    vertical-align: middle;
  }
}


.share-box {
  display: flex;
  flex-direction: column;

  .share-org {
    margin-top: 24px;
    display: flex;
    flex-direction: column;

    .share-org-title {
      display: flex;
      flex-direction: row;
      align-items: center;

      .share-org-title-add {
        margin-left: 24px;
        display: flex;
        flex-direction: row;
        align-items: center;

        .icon-new {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          margin-right: 4px;
          width: 24px;
          height: 24px;
          line-height: 24px;
          border-radius: 50%;
          color: #1f6ded;
        }
      }

      .checkbox-all {
        margin-left: 24px;
      }

      .share-org-title-text {
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
        line-height: 14px;
      }
    }

    .share-org-content {
      margin-top: 8px;
      width: 592px;
      min-height: 40px;
      padding: 8px;
      background: #FFFFFF;
      border-radius: 2px;
      opacity: 1;
      border: 1px dashed rgba(0, 0, 0, 0.15);
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      .org-user-list {}
    }
  }

  .share-org:first-child {
    margin-top: 0;
  }
}


::v-deep(.ant-table-tbody > tr > td:nth-last-of-type(1)) {
  text-align: right;
}

.baseTable {
  position: relative;
}

.baseTable .aTable {
  max-height: 450px;
  height: fit-content;
  overflow: auto;
}

.resource_modal {
  ::v-deep(.ant-modal-wrap .ant-modal-body) {
    padding: 24px 24px 0;
  }
}





.column-text {
  min-width: 167px;
  position: relative;
  margin-left: -4px;

  .res-tree-menus {
    margin: 0;
    top: 28px;
    right: 6px;
    background: #fff;
    z-index: 44;
    position: absolute;
    list-style-type: none;
    min-width: 88px;
    padding: 5px 0;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0px -3px 16px 0px rgba(89, 155, 255, 0.15);

    li {
      margin: 0;
      padding: 0 20px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 400;
      line-height: 32px;
      color: rgba(0, 0, 0, 0.85);

      &:hover {
        background: rgba(0, 0, 0, 0.04);
      }
    }
  }
}



.table-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: 24px;

  .org-text {
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
    line-height: 14px;
  }
}

.searchContent {
  margin-left: 8px;

  .icon-search {
    font-size: 20px;
    color: rgba(0, 0, 0, 0.45);
    position: absolute;
    right: 12px;
    top: 0px;
  }
}

.modal-select {
  width: 288px;
}


.contentIndexLeft {
  padding-right: 24px;
  width: 216px;
  height: 100%;
}

::v-deep(::-webkit-scrollbar) {
  height: 10px;
}

::v-deep(.side-left .ant-tree-list-holder) {
  width: auto;
  height: 100%;
  transition: width 0.3s;
}

::v-deep(.side-close .ant-tree-list-holder) {
  width: 0;
  height: 100%;
  transition: width 0.3s;
}

::v-deep(.side-left .ant-tree-list:hover .ant-tree-list-scrollbar) {
  display: block !important;
}

::v-deep(.ant-tree-list .ant-tree-list-scrollbar) {
  display: none !important;
}

::v-deep(.ant-tree-list-scrollbar-thumb) {
  background: rgba(0, 0, 0, 0.15) !important;
}

::v-deep(.ant-checkbox + span) {
  padding-left: 8px;
  padding-right: 0;
}

::v-deep(.ant-table-wrapper) {
  margin-top: 24px;
}

::v-deep(.ant-table-thead > tr > th) {
  // padding: 16px 0 16px 16px;
}

table tr th.ant-table-selection-column,
table tr td.ant-table-selection-column {
  padding-right: 8px;
  padding-left: 8px;
  text-align: left;
}
</style>
<style lang="scss">
.addMember_modal {
  .modal_table {
    height: 100%;
    overflow: hidden;
  }
}
</style>

<style lang="less">
.side-left {
  .ant-input-search {
    margin-top: 16px;
  }

  .ant-tree {
    height: calc(100% - 88px);
    overflow: auto;

    .ant-tree-treenode {
      width: 100%;

      .ant-tree-node-content-wrapper {
        width: 100%;
      }
    }

    .ant-tree::-webkit-scrollbar {
      display: none;
    }

    .ant-tree:hover::-webkit-scrollbar {
      display: block;
    }

    .ant-tree-list-scrollbar-thumb {
      height: auto !important;
    }

    .ant-tree-list-holder {
      overflow-y: unset !important;
    }
  }
}

.ant-image-preview-img-wrapper {

  // left: 50%;
  // transform: translateX(-50%);
  img {
    display: inline-block;
  }
}
</style>
<style lang="less">
.addOrgUser_modal {
  .ant-modal-content {
    .ant-modal-body {
      min-height: 216px;
    }
  }


}
</style>
